<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/public.css">
    <link rel="stylesheet" href="../style/bootstrap.css">
    <title>后台管理系统</title>
    <style>
        header img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
        }

        .tips {
            color: red;
        }
    </style>
</head>

<body>
    <div class="home">
        <header class="h70 fcb pa10 ba289">
            <div class="fl aic">
                <img :src="headInfo.icon" alt="">
                <span class="f16 ml-10 cfff">{{ headInfo.name }}</span>
            </div>
            <h1 class="f16 cfff">后台管理系统</h1>
        </header>

        <main>
            <div class="container">
                <h1 class="pt-4">用户添加</h1>
                <div class="user-form">
                    <div class="form-group">
                        <label for="name">名称</label>
                        <input v-model="newUser.name" type="text" class="form-control" id="name" placeholder="名称">
                    </div>
                    <div class="form-group">
                        <label for="icon">头像</label>
                        <input v-model="newUser.icon" type="text" class="form-control" id="icon" placeholder="图片链接">
                    </div>
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input v-model="newUser.username" type="text" class="form-control" id="username"
                            placeholder="用户名">
                        <div class="tips mt-2" v-if="usernameTips">{{ usernameTips }}</div>
                    </div>
                    <div class="form-group">
                        <label for="userphone">手机号</label>
                        <input v-model="newUser.phone" type="text" class="form-control" id="userphone"
                            placeholder="手机号">
                        <div class="tips mt-2" v-if="phoneTips">{{ phoneTips }}</div>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input v-model="newUser.password" type="password" class="form-control" id="password"
                            placeholder="密码">
                        <div class="tips mt-2" v-if="passwordTips">{{ passwordTips }}</div>
                    </div>
                    <div class="form-group">
                        <label for="authority">权限</label>
                        <select v-model="newUser.authority" class="form-control" id="authority">
                            <option value="3">普通用户</option>
                            <option value="2">管理员</option>
                        </select>
                    </div>
                    <button @click="addUser" class="btn mt-3 btn-primary">添加用户</button>
                </div>
            </div>
        </main>

    </div>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/vue2.js"></script>
    <script>
        const userId = location.href.split('?')[1].split('=')[1];
        const home = new Vue({
            el: '.home',
            data: {
                headInfo: [],
                usernameTips: '',
                phoneTips: '',
                passwordTips: '',
                newUser: {
                    name: '',
                    username: '',
                    phone: '',
                    password: '',
                    authority: 3,
                    cTime: null,
                    uTime: null
                }
            },
            async created() {
                let resHeadInfo = await axios.get('http://localhost:3888/user/' + userId);
                this.headInfo = resHeadInfo.data;
            },
            methods: {
                formateDate(time) {
                    if (!time) {
                        return '';
                    }
                    var date = new Date(time);
                    var Y = date.getFullYear();
                    var M = date.getMonth() + 1;
                    var D = date.getDate();

                    M = M < 10 ? '0' + M : M;
                    D = D < 10 ? '0' + D : D;
                    return `${Y}-${M}-${D}`
                },
                async addUser() {
                    // 输入验证
                    let valid = true;
                    this.usernameTips = '';
                    this.phoneTips = '';
                    this.passwordTips = '';

                    if (!this.newUser.username && !this.newUser.phone) {
                        this.usernameTips = '用户名和手机号至少输入一个';
                        this.phoneTips = '用户名和手机号至少输入一个';
                        valid = false;
                    }
                    if (!this.newUser.password) {
                        this.passwordTips = '密码未输入';
                        valid = false;
                    }
                    if (!this.newUser.name) {
                        this.newUser.name = this.newUser.username || this.newUser.phone;
                    }

                    if (valid) {
                        // 在添加用户时设置创建时间和修改时间
                        this.newUser.cTime = Date.now();
                        this.newUser.uTime = Date.now();
                        try {
                            const response = await axios.post('http://localhost:3888/user', this.newUser);
                            // 假设添加成功后将新用户添加到用户列表中
                            this.user.push(response.data);

                        } catch (error) {
                            console.log(error);
                        }
                        alert('用户添加成功');
                        this.goBack();
                    }
                },
                resetForm() {
                    this.newUser = {
                        name: '',
                        username: '',
                        phone: '',
                        password: '',
                        authority: 3,
                        cTime: null,
                        uTime: null
                    };
                },
                goBack() {
                    window.history.back();
                }
            }
        })
    </script>
</body>

</html>